<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/formedit.js"></script>
  </head>
  
  <body>
    <div class="x-body">
        <form id="fm" class="layui-form">
          <input type="hidden" name="id"/>
          <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">
                  <span class="x-red">*</span>姓名
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="L_username" name="doctorname" required="" lay-verify="doctorname"
                  autocomplete="off" class="layui-input"/>
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">
                  <span class="x-red">*</span>头像
              </label>
                <div class="layui-upload">
				  <div class="layui-upload-list">
				    <img class="layui-upload-img" id="headimg" style="width:100px;height:100px;"/>
				    <input type="hidden" id="img1" name="img1"/>
				  </div>
				  <button type="button" class="layui-btn" style="margin-left: 110px;" id="test1">上传图片</button>
				</div>
          </div>
          
          <div class="layui-form-item">
              <label for="L_pass" class="layui-form-label">
                  <span class="x-red">*</span>就职医馆
              </label>
              <div class="layui-input-inline">
                   <select name="hospitalid" lay-verify="">
                      
                    </select>   
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">
                  <span class="x-red">*</span>职称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="L_telphone" name="title" required="" lay-verify="title"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">
                  <span class="x-red">*</span>擅长
              </label>
              <div class="layui-input-inline">
                  <textarea type="text" id="L_age" name="advantage" required="" lay-verify="advantage" class="layui-textarea"
                  autocomplete="off" class="layui-input" lay-verify="advantage"></textarea>
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">
                  <span class="x-red">*</span>个人简介
              </label>
              <div class="layui-input-inline">
                  <textarea type="text" id="L_age" name="introduction" required="" lay-verify="introduction" class="layui-textarea"
                  autocomplete="off" class="layui-input" ></textarea>
              </div>
          </div>
          
          
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" lay-submit="">保存</button>
          </div>
      </form>
    </div>
    <script type="text/javascript">
         $(function(){
        	 /**请求所有的医馆信息*/
             $.post("/hospitals/search",function(res){
                 for(let i=0;i<res.rows.length;i++){
                   $("select[name='hospitalid']").append(`<option value="${res.rows[i].id}">${res.rows[i].hname}</option>`)
                 }
                 layui.use(['layer', 'form'], function(){
                     var layer = layui.layer
                     ,form = layui.form;
                     form.render('select');
                 });
             })
         })
    </script>
    
    
    <script>
      layui.use(['form','layer','upload'], function(){
        $ = layui.jquery;
        var form = layui.form
        ,layer = layui.layer,upload = layui.upload;
        
        //普通图片上传
        var uploadInst = upload.render({
          elem: '#test1',
          url: '/image/upload',
          before: function(obj){
            obj.preview(function(index, file, result){
              $('#headimg').attr('src', result); //图片链接
            });
          },
          done: function(res){
            //如果上传失败
            if(res.code!= 200){
              return layer.msg('上传失败');
            }else{
            	console.log(res.data);
            	$("#img1").val(res.data);
            }
          },
          error: function(){
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
              uploadInst.upload();
            });
          }
        });
        
        //自定义验证规则
        form.verify({
	        doctorname: function(value){
	            if(value.length < 1){
	              return '姓名不能为空';
	            }
	        },
            title: function(value){
              if(value.length < 1){
                return '职称不能为空';
              }
            },
            advantage: function(value){
                if(value.length < 1){
                  return '擅长不能为空';
                }
            },
            introduction: function(value){
                if(value.length < 1){
                  return '简介不能为空';
                }
            }
        });

        //监听提交
        form.on('submit(add)', function(data){
        	  var formData=JSON.stringify(data.field);
	          console.log(formData);
	          //发异步，把数据提交给后台
	          $.ajax({
	          	type:"post",
	          	url:"/doctors/insert",
	          	data:formData,
       			contentType: "application/json;charset=utf-8",
       			dataType: "json",//预期服务器返回的数据类型
       			async:false,
       			success:function(result){
       				console.log(result);//打印服务端返回的数据
       				layer.alert("保存成功", {icon: 6},function () {
	                // 获得frame索引
	                var index = parent.layer.getFrameIndex(window.name);
	                //关闭当前frame
	                parent.layer.close(index);
	                //刷新父页面表格
	                parent.layui.table.reload('idTest',{page: {curr: 1}});//idTest是表格的id；
          		});
       			},
       			error:function(){
       				layer.alert("保存失败", {icon: 5});
       			}
	          });
	          return false;
	        });
      });
  </script>
  </body>

</html>